<template name="searchAre">
    <div class="searchAre">
        <el-row type="flex" :gutter="10">
            <el-col :span="3">
                <el-cascader
                    :options="classList"
                    :props="classShowType"
                    @change="classChange" placeholder="请选择商品分类" clearable></el-cascader>
            </el-col>
            <el-col :span="3">
                <el-select v-model="status" placeholder="请选择商品状态" @change="statusChange" clearable>
					<el-option label="全部" value="10"></el-option>
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="上架" value="1"></el-option>
                    <el-option label="下架" value="2"></el-option>
                    <el-option label="审核未通过" value="3"></el-option>
					<el-option label="商品回收站" value="4"></el-option>

                </el-select>
            </el-col>
            <el-col :span="4">
                <el-input v-model="goodsName" placeholder="请输入商品名称" @input="goodsNameInput" clearable></el-input>
            </el-col>
			<el-col :span="4" v-if="$store.state.system_type == 1">
				<el-select v-model="supplier" clearable placeholder="请选择供货商" @change="supplierChange" >
					<el-option
							v-for="item in supplierList"
							:key="item.id"
							:label="item.supplier_name"
							:value="item.id"
					>
					</el-option>
				</el-select>
			</el-col>
            <el-col :span="5">
                <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "searchAre",
    props: ['classList','supplierList'],
    data(){
        return{
            status: '',
            goodsName: '',
            oneClassId: '',
            twoClassId: '',
            classShowType:{
                value:'id',
                label:'class_name',
                children:'children',
                expandTrigger: 'hover'
            },
			supplier:'',
            supplier_id:''
        }
    },
    methods: {
        classChange(value) {
            if(value.length!=0){
                this.oneClassId = value[0]
                this.twoClassId = value[1]
            }else{
                this.oneClassId = ''
                this.twoClassId = ''
            }
        },
        statusChange(value){
            this.status = value
        },
        goodsNameInput(value){
            this.goodsName = value
        },
		supplierChange(value){
			this.supplier_id = value
		},
        searchClick(){
			console.log(this.supplier_id)
            this.$emit('searchClick',this.oneClassId,this.twoClassId,this.status,this.goodsName,this.supplier_id)
        }
    }
}
</script>

<style>
    .searchAre{
        width: 100%;
        height: 60px;
        background: white;
        margin: 20px 0;
        padding: 10px 10px;
        box-sizing: border-box
    }
</style>
